<template>
	<view class="container">
		<!-- 注册 -->
		<view v-if="show==1">
			<!-- 返回按钮 -->
			<view class="goback" @click="goback">
				<image src="../../static/register/goback.png" mode=""></image>
			</view>
			<view class="reg">注册</view>
			<view class="textarea">
				<input type="number" placeholder="请输入手机号" @input="inputphone" v-model="phone" />
			</view>
			<view class="login">
				<text style="color: #666666;">已有账号？</text>
				<text @click="goLogin">登录</text>
			</view>
			<view class="next" :class="{'next-after':flag1}" @click="next(2)">下一步</view>
		</view>
		<!-- 填写验证码 -->
		<view v-if="show==2">
			<view class="goback" @click="goback">
				<image src="../../static/register/goback.png" mode=""></image>
			</view>
			<view class="code">填写验证码</view>
			<view class="sendto">验证码发送至 {{phone}}</view>
			<view class="textarea getcode">
				<!-- <input type="number" placeholder="请输入验证码" @input="inputcode" v-model="code" /> -->
				<u-input type="number" placeholder="请输入验证码" @input="inputcode" v-model="code"/>
				<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
				@change="codeChange"></u-verification-code>
				<u-button @tap="getCode">{{tips}}</u-button>
			</view>
			<view class="agree">
				<!-- 选择按钮 -->
				<image v-if="check"  class="checkbox" style="width: 32rpx; height: 32rpx;" src="../../static/balance/arrive.png" mode="aspectFit" @click="choose"></image>
				<view v-else class="checkbox" @click="choose"></view>
				<view class="agree-text">同意</view>
				<view class="agreement" @click="toxieyi">《注册协议》</view>
			</view>
			<view class="confirm" :class="{'confirm-after':flag2}" @click="next(3)">确定</view>
		</view>
		<!-- 填写昵称 -->
		<view v-if="show==3">
			<view class="goback" @click="goback">
				<image src="../../static/register/goback.png" mode=""></image>
			</view>
			<view class="reg">填写昵称</view>
			<view class="textarea">
				<input type="text" placeholder="请输入您的昵称" @input="inputname" v-model="nickname" />
			</view>
			<view class="next" :class="{'next-after':flag3}" @click="next(4)">下一步</view>
		</view>
		<!-- 填写密码 -->
		<view v-if="show==4">
			<view class="goback" @click="goback">
				<image src="../../static/register/goback.png" mode=""></image>
			</view>
			<view class="reg">设置密码</view>
			<view class="textarea">
				<input type="password" placeholder="请输入密码" v-model="password" />
			</view>
			<view class="text">密码格式应为6-16位数字、字母或符号，不允许有空格</view>
			<view class="textarea">
				<input type="password" placeholder="请再次输入密码" @input="inputpwd1" v-model="repassword" />
			</view>
			<view class="textarea">
				<input type="text" placeholder="邀请码(选填)" v-model="inviteCode"/>
			</view>
			<view class="next" :class="{'next-after':flag4}" @click="login">完成并登录</view>
		</view>
		<u-popup v-model="showDia" mode="center" border-radius="12">
				<view class="dialogShow">
					<view class="notice">
						提示
					</view>
					<view class="content">
						该手机号已注册
					</view>
					<view class="notice_btn">
						<text @click="showDia = false">知道了</text><text style="margin-left: 30rpx;" @click="goLogin">立即登陆</text>
					</view>
				</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				phone:'',
				flag1:false,
				show:1,
				code:'',
				flag2:false,
				check:false,
				nickname:'',
				flag3:false,
				password:'',
				flag4:false,
				inviteCode:'',
				repassword:'',
				tips: '',
				// refCode: null,
				seconds: 10,
				showDia:false
			}
		},
		onLoad(e) {
			console.log(e)
			if(e.ma){
				this.inviteCode=e.ma
			}
		},
		methods:{
			toxieyi(){
				uni.navigateTo({
					url:"/pages/user/xieyi?type=1"
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.request({
					    url: this.baseUrl + '/login/getCode',
					    dataType: 'json', //默认 json格式
					    method: 'POST', //请求方式
						data:{
							phone:this.phone
						},
					    success: (res) => {
					        console.log(res)
					    },
					    fail: (error) => {
					        console.log(error)
					    }
					})
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			// input事件
			inputphone(){
				if(this.$u.test.mobile(this.phone)){
					this.flag1=true
					uni.request({
					    url: this.baseUrl + '/login/checkPhone',
					    dataType: 'json', //默认 json格式
					    method: 'POST', //请求方式
						data:{
							phone:this.phone
						},
					    success: (res) => {
					        console.log(res)
							if(res.data.code == 0){
								this.showDia = true
							}
					    },
					    fail: (error) => {
					        console.log(error)
					    }
					})
				}else{
					this.flag1=false
				}
			},
			inputcode(){
				if(this.code.trim()!="" && this.check==true){
					this.flag2=true
				}else{
					this.flag2=false
				}
			},
			inputname(){
				if(this.nickname.trim()!=""){
					this.flag3=true
				}else{
					this.flag3=false
				}
			},
			// inputpwd(){
			// 	if(this.password.trim()!="" && this.password.length>=6){
			// 		this.flag4=true
			// 	}else{
			// 		this.flag4=false
			// 	}
			// },
			inputpwd1(){
				if(this.password.trim()!="" && this.password.length>=6 && this.repassword.trim()!=""){
					this.flag4=true
				}else{
					this.flag4=false
				}
			},
			next(e){
				if(this.flag1==false){
					this.msg('手机号格式错误',"none")
				}else{
					this.show=e
				}
			},
			choose(){
				this.check=!this.check
				this.inputcode()
			},
			login(){
				uni.request({
				    url: this.baseUrl + '/login/register',
				    dataType: 'json', //默认 json格式
				    method: 'POST', //请求方式
					data:{
						phone:this.phone,
						password:this.password,
						repassword:this.repassword,
						code:this.code,
						nickname:this.nickname,
						invite_code:this.inviteCode
					},
				    success: (res) => {
						if(res.data.code == 1){
							uni.setStorageSync("userInfo",res.data.data.user)
							uni.setStorageSync("token",res.data.data.user.token)
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1500,
								mask: true
							})
							setTimeout(()=>{
								uni.switchTab({
									url:"/pages/index/index"
								})
							},1500)
						}else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1500,
								mask: true
							})
						}
				    },
				    fail: (error) => {
				        console.log(error)
				    }
				})
			},
			//返回按钮
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style>
	.notice_btn{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #06923D;
		opacity: 1;
		text-align: right;
		margin-top: 80rpx;
	}
	.content{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #333333;
		opacity: 1;
		margin-top: 30rpx;
	}
	.notice{
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 59rpx;
		color: #333333;
		opacity: 1;
		margin-top: 47rpx;
	}
	.dialogShow{
		width: 636rpx;
		height: 349rpx;
		background: #FFFFFF;
		border: 1rpx solid #707070;
		opacity: 1;
		padding: 0 60rpx;
	}
	.u-btn--default{
		color: #06923D;
	}
	.container{
		padding: 0 60rpx;
	}
	.goback{
		margin-top: 30rpx;
	}
	.goback>image{
		width: 65rpx;
		height: 48rpx;
	}
	.reg{
		width: 300rpx;
		height: 88rpx;
		font-size: 63rpx;
		font-weight: bold;
		line-height: 88rpx;
		color: #999999;
		margin-top: 77rpx;
	}
	.textarea{
		width: 630rpx;
		margin: 80rpx auto 44rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #D9D9D9;
		font-size: 36rpx;
		font-weight: 400;
		color: #D4D4D4;
	}
	.login{
		text-align: right;
		font-size: 36rpx;
		font-weight: 400;
		color: #06923D;
	}
	.next{
		width: 252rpx;
		height: 86rpx;
		background: #E2E2E2;
		/* background: #06923D; */
		border-radius: 52rpx;
		margin-left: auto;
		text-align: center;
		line-height: 86rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 383rpx;
	}
	.next-after{
		background: #06923D;
	}
	.code{
		width: 315rpx;
		height: 88rpx;
		font-size: 63rpx;
		font-weight: bold;
		line-height: 88px;
		color: #999999;
		margin-top: 77rpx;
	}
	.sendto{
		width: 363rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
		color: #999999;
		margin-top: 60rpx;
	}
	.getcode{
		display: flex;
		justify-content: space-between;
	}
	.getcodema{
		font-size: 28rpx;
		font-weight: 400;
		color: #06923D;
	}
	.agree{
		display: flex;
		align-items: center;
		margin-top: 44rpx;
	}
	.checkbox{
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 1px solid #D9D9D9;
	}
	.agree-text{
		margin-left: 30rpx;
		color: #666666;
		font-size: 36rpx;
	}
	.agreement{
		font-size: 36rpx;
		font-weight: 400;
		color: #06923D;
	}
	.confirm{
		margin-left: auto;
		width: 252rpx;
		height: 86rpx;
		background: #E2E2E2;
		border-radius: 52rpx;
		font-size: 36rpx;
		font-weight: 400;
		line-height: 86rpx;
		color: #FFFFFF;
		text-align: center;
		margin-top: 353rpx;
	}
	.confirm-after{
		background: #06923D;
	}
	.text{
		margin-top: -30rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}
</style>
